<template>
  <div class="pad-lft-rgt-10 relate-device">
    <div v-for="(item, index) in computedDevices" :key="index">
      <div class="flex-com mar-btm">
        <span class="label-title">组件设备{{index + 1}}：</span>
        {{item.deviceName}}
      </div>
      <div class="flex-com mar-btm">
        <span class="label-title">关联设备{{index + 1}}：</span>
        <el-select v-model="item.newId" size="mini"
                   placeholder="关联设备名称" class="width-input">
          <el-option v-for="(list, index) in deviceList" :key="index" :label="list.deviceOtherName?list.deviceOtherName:list.deviceName"
                     :value="list._id" :disabled="item.protocolId!==list.protocolId"></el-option>
          <el-option v-if="!deviceList.some(option=>option._id===item.newId)" label="请选择关联的设备"
                     :value="item.newId"></el-option>
        </el-select>
      </div>
    </div>
    <div class="flex-justify-end">
      <el-button type="info" size="small" @click="relateDeviceDialogCancel"><span class="mar-lft-rgt-10">取消</span>
      </el-button>
      <el-button type="primary" class="mar-lft-10" @click="relateDeviceDialogSubmit" size="small">
        <span class="mar-lft-rgt-10">确认</span>
      </el-button>
    </div>
  </div>
</template>
<script>
  import {mapState} from "vuex";

  export default {
    name: "RelateDevice",
    props: {
      devices: {
        type: Array,
        default: () => []
      },
    },
    computed: {
      ...mapState({
        globalDeviceList: state => state.ide.globalDeviceList,
      }),
      deviceList() {
        //组合自定义命令和设备命令到一个组
        return this.globalDeviceList.map(device => {
          const commandList = [];
          const {customCommand, commands} = device;
          if (customCommand && customCommand.length > 0) {
            commandList.push({
              label: "自定义命令",
              options: customCommand,
              value: 0,
            });
          }
          if (commands && commands.length > 0) {
            commandList.push({
              label: "设备命令",
              options: commands,
              value: 1,
            });
          }
          device.commandList = commandList;
          return device;
        });
      },
      computedDevices() {
        return this.devices
      }
    },

    methods: {
      relateDeviceDialogCancel() {
        this.$emit('relateDeviceCancel')
      },
      relateDeviceDialogSubmit() {
        if (this.computedDevices.every(item => item.newId)) {
          this.$emit('relateDeviceSubmit', this.computedDevices)
        } else {
          this.$message.error('请选择关联的设备')
        }

      }
    }
  }
</script>
<style scoped lang="less">
  .relate-device {
    width: 100%;

    .flex-com {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .label-title {
      display: inline-block;
      min-width: 80px;
      color: #666;
      font-size: 14px;
    }

    .width-input {
      width: 100%;

      /deep/ .el-input__inner {
        background: #f7f8fa;
      }
    }
  }
</style>
